<template>
  <div class="draggable-window" :style="windowStyle">
    <div class="header" @mousedown="startDrag">
      <span>模拟监控</span>
    </div>
    <div class="content" @click="playVideo" v-if="!isVideoPlaying">
      <img :src="imageSrc" alt="Window Image" />
    </div>
    <div class="content" v-else>
      <video ref="videoPlayer" controls @timeupdate="updateCurrentTime">
        <source :src="videoUrl" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DraggableWindowVideo',
    props: {
      initialTop: {
        type: Number,
        default: 50
      },
      initialLeft: {
        type: Number,
        default: 100
      },
      initialWidth: {
        type: Number,
        default: 1280
      },
      initialHeight: {
        type: Number,
        default: 800
      },
      initialImageSrc: {
        type: String,
        default: require('@/assets/QQ_1722763786020.png'),
      }
    },
    data() {
      return {
        imageSrc: this.initialImageSrc,
        isDragging: false,
        offsetX: 0,
        offsetY: 0,
        windowPosition: {
          top: this.initialTop,
          left: this.initialLeft
        },
        windowWidth: this.initialWidth,
        windowHeight: this.initialHeight,
        isVideoPlaying: false,
        videoUrl: '',
        socket: null,
        videoData: '[[0, 0, 0], [0, 0, 0], [0, 0, 0]]',
      };
    },
    computed: {
      windowStyle() {
        return {
          top: `${this.windowPosition.top}px`,
          left: `${this.windowPosition.left}px`,
          width: `${this.windowWidth}px`,
          height: `${this.windowHeight}px`
        };
      }
    },
    mounted() {
      // 建立 WebSocket 连接
      this.socket = new WebSocket('ws://101.37.26.163:8607/cloud-spider/baseResource/video/message');

      this.socket.onmessage = (event) => {
        const data = event.data;
        this.videoData = data;
        this.updateData();
        // this.updateData();
        // console.log(data);
        // 在这里处理从服务器接收到的数据
      };

      this.socket.onopen = () => {
        console.log('WebSocket connection established');
      };

      this.socket.onclose = () => {
        console.log('WebSocket connection closed');
      };

    },
    beforeDestroy() {
      // 在组件销毁前关闭 WebSocket 连接
      if (this.socket) {
        this.socket.close();
      }
    },
    methods: {
      updateData() {
        // console.log("ok")
        this.$emit('data-updated', this.videoData);
      },
      updateCurrentTime() {
        // 获取视频元素
        const videoElement = this.$refs.videoPlayer;

        // 确保视频元素存在并且已加载
        if (videoElement && videoElement.readyState >= videoElement.HAVE_CURRENT_DATA) {
          // 获取当前播放时间
          const currentTime = videoElement.currentTime;
          // 通过 WebSocket 发送当前播放时间
          if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(currentTime.toString());
          }
          // 这里可以将 currentTime 存储到数据中，或者进行其他处理
        }
      },
      startDrag() {
        this.isDragging = true;
        this.offsetX = event.clientX - this.windowPosition.left;
        this.offsetY = event.clientY - this.windowPosition.top;
        document.addEventListener('mousemove', this.onDrag);
        document.addEventListener('mouseup', this.stopDrag);
      },
      onDrag(event) {
        if (this.isDragging) {
          // 计算新位置
          let newTop = event.clientY - this.offsetY;
          let newLeft = event.clientX - this.offsetX;

          // 检查边界
          const minTop = 0;
          const minLeft = 0;
          const maxTop = window.innerHeight - this.windowHeight;
          const maxLeft = window.innerWidth - this.windowWidth;

          // 限制新位置在边界内
          newTop = Math.max(minTop, Math.min(newTop, maxTop));
          newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft));

          // 更新位置
          this.windowPosition.top = newTop;
          this.windowPosition.left = newLeft;
        }
      },
      stopDrag() {
        this.isDragging = false;
        document.removeEventListener('mousemove', this.onDrag);
        document.removeEventListener('mouseup', this.stopDrag);
      },
      playVideo() {
        this.isVideoPlaying = true;
        this.videoUrl = 'http://101.37.26.163:8607/cloud-spider/baseResource/video'; // 设置视频URL
      }
    }
  };
</script>

<style scoped>
  .draggable-window {
    position: absolute;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .header {
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    cursor: move;
  }

  .content {
    padding: 10px;
    height: calc(100% - 60px);
    /* 计算减去 header 的高度 */
    overflow: hidden;
  }

  .content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  video {
    width: 100%;
    height: 100%;
  }
</style>
